import React, { Component } from 'react'
import { FormattedMessage } from 'react-intl'
import { helper } from '../utils'

export default class PositionDetailTop extends Component {
	render() {
		const { data } = this.props
		console.log(data)
		return (
			<div className="rt-position-detail-top">
			  <div className="-left">
			  	<span className="-one">
			  	  <FormattedMessage id="ordernumber"/>
			  	  {data.orderNo} 
			  	</span>
			  	<span className="-two">
			  		<FormattedMessage id={helper.splitString(data.ccyPair || 'EUR/USD')[0]}/>
		            <span>/</span>
		            <FormattedMessage id={helper.splitString(data.ccyPair || 'EUR/USD')[1]}/>
			  	</span>
			  </div>
			  <div className="-center">
			  	<div className="-one">
			  	  <div className={`-one-left ${data.bsCls == 0 ? '' : '-green'}`}>
			  	  	<FormattedMessage id={data.bsCls == 0 ? 'sell' : 'buy'}/>
			  	  </div>
			  	  <div className="-one-right">{helper.accDiv(data.positionAmt, 1000)}</div>
			  	</div>
			  	<div className="-two">
			  	  x 1000<FormattedMessage id={helper.splitString(data.ccyPair || 'EUR/USD')[0]}/>
			  	</div>
			  </div>
			  <div className="-right">
			  	<FormattedMessage
			  	  id="profitpandploss"
			  	/>
			  	<div className="-two">{data.unsettledPl}元</div>
			  </div>
			</div>
			)
	}
}